<template>
  <div>
    <h2>计算属性</h2>
    <p>{{fullName}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      xing: '张',
      ming: '三'
    }
  },
  // 计算属性
  computed: {
  fullName: {
    get() {
      // 当获取计算属性值的时候，就会调用 get 方法
      return this.xing + ' ' + this.ming
    },
    set(value) {
      // 当修改计算属性值的时候，就会执行 set 方法
      // value 就是修改后的计算属性值
      let arr = value.split(' ')
      this.xing = arr[0]
      this.ming = arr[1]
    }
  }
}
}
</script>

<style>
  h2{
    color: red;
  }
</style>